
<template>
  <WelcomeItem>
    <el-button @click="store.increment">Count is: {{ store.count }}</el-button>

    <el-button>{{ store.name }}</el-button>

    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>


    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>
 




</template>
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
import { ref, onMounted,computed ,reactive } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import * as userApi from "@/api/userApi";

// 响应式状态
const count = ref(0)

const store = useCounterStore()
// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
const { name, doubleCount,token,setToken } = storeToRefs(store)
// 作为 action 的 increment 可以直接解构

onMounted(() => {
  userApi.useCredit();
})

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
